<template>
  <div class="main">
    <div class="zx">
      <div class="bzDiv">
        <Image
          src="https://oss.adu88.top/blog/images/2.gif"
          width="100%"
          height="300px"
          lazy
        >
          <template #placeholder>
            <div class="imgLoading"></div>
          </template>
        </Image>
        <h1 class="ssn">一些碎碎念</h1>
      </div>
      <ul id="ssUl" v-if="momentsData">
        <li v-for="item in momentsData.records" :key="item.id">
          <div class="user">
            <Avatar
              icon="ios-person"
              size="large"
              :src="variables.bz_tx.value"
            />
            <div>
              <p style="font-size: 18px">{{ variables.bz_name.value }}</p>
              <p style="color: #b6b6b6">{{ item.createTime }}</p>
            </div>
          </div>

          <MdPreview
            class="moment_content"
            :modelValue="item.content"
            previewTheme="mk-cute"
          />

          <div
            style="
              height: 30px;
              display: flex;
              align-items: center;
              margin-bottom: 10px;
            "
          >
            <Icon
              type="ios-chatbubbles-outline"
              size="20"
              style="cursor: pointer"
              @click="hfpl(null, item.id)"
            />

            <Icon
              @click="dz($event, item.id)"
              :type="item.sfStick ? 'ios-thumbs-up' : 'ios-thumbs-up-outline'"
              size="20"
              style="margin: 0 3px 0 10px; cursor: pointer"
            />

            <span>{{ item.stick }}</span>
          </div>

          <div
            style="margin: 0 auto; display: none; padding: 0 0 20px 0"
            :id="`reply` + item.id"
            class="replyDiv"
          >
            <Comment type="Moments" />
            <div style="text-align: center">
              <Button type="primary" ghost @click="qxhf">取消回复</Button>
            </div>
          </div>

          <div
            v-for="fpl in item.comments"
            :key="fpl.id"
            style="color: #808080"
          >
            <div>
              <div
                class="hfplDiv"
                @mouseover="replyOver(fpl.id)"
                @mouseout="replyOut(fpl.id)"
              >
                <div style="display: flex; align-items: center">
                  <div
                    style="position: relative; height: 25px; margin-right: 5px"
                  >
                    <Avatar
                      icon="ios-person"
                      size="small"
                      :src="fpl.avatarUrl"
                    />&nbsp;
                    <div class="bozhu" v-if="fpl.email == '376162374@qq.com'">
                      <Tooltip content="博主" placement="right">
                        <Icon type="logo-angular" :size="5" />
                      </Tooltip>
                    </div>
                  </div>
                  <div>
                    <h3>
                      {{ fpl.nickname }}
                      <Time
                        style="
                          font-size: 10px;
                          font-weight: 400;
                          margin-left: 20px;
                        "
                        :time="fpl.creationTime"
                        :interval="1"
                      />
                    </h3>
                    <p v-html="fpl.content"></p>
                  </div>
                </div>
                <Icon
                  type="ios-chatbubbles-outline"
                  size="20"
                  :id="`replyIco` + fpl.id"
                  style="cursor: pointer; display: none"
                  @click="hfpl(fpl.id, fpl.id)"
                />
              </div>
              <div
                style="margin: 0 auto; display: none; padding: 0 0 20px 0"
                :id="`reply` + fpl.id"
                class="replyDiv"
              >
                <Comment type="Moments" />
                <div style="text-align: center">
                  <Button type="primary" ghost @click="qxhf">取消回复</Button>
                </div>
              </div>
            </div>

            <div v-for="zpl in fpl.children" :key="zpl.id">
              <div
                class="hhfplDiv"
                @mouseover="replyOver(zpl.id)"
                @mouseout="replyOut(zpl.id)"
              >
                <div style="display: flex; align-items: center">
                  <div
                    style="position: relative; height: 25px; margin-right: 5px"
                  >
                    <Tooltip :content="zpl.nickname" placement="right">
                      <Avatar
                        icon="ios-person"
                        size="small"
                        :src="zpl.avatarUrl"
                      />&nbsp;
                    </Tooltip>
                    <div class="bozhu" v-if="zpl.email == '376162374@qq.com'">
                      <Tooltip content="博主" placement="right">
                        <Icon type="logo-angular" :size="12" />
                      </Tooltip>
                    </div>
                  </div>
                  <div>
                    <h3>
                      {{ zpl.nickname }}
                      <a style="font-size: 14px">{{
                        "&nbsp;@" + zpl.bhfName
                      }}</a>
                      <Time
                        style="
                          font-size: 10px;
                          font-weight: 400;
                          margin-left: 20px;
                        "
                        :time="zpl.creationTime"
                        :interval="1"
                      />
                    </h3>
                    <p v-html="zpl.content"></p>
                  </div>
                </div>
                <Icon
                  type="ios-chatbubbles-outline"
                  size="20"
                  :id="`replyIco` + zpl.id"
                  style="cursor: pointer; display: none"
                  @click="hfpl(fpl.id, zpl.id)"
                />
              </div>
              <div
                style="margin: 10px auto 0; display: none; padding: 0 0 20px 0"
                :id="`reply` + zpl.id"
                class="replyDiv"
              >
                <Comment type="Moments" />
                <div style="text-align: center">
                  <Button type="primary" ghost @click="qxhf">取消回复</Button>
                </div>
              </div>
            </div>
          </div>
        </li>
      </ul>

      <div
        style="text-align: center; margin-top: 100px"
        v-if="momentsData && momentsData.pages > 1"
      >
        <Page
          v-if="momentsData"
          :total="momentsData.total"
          v-model="momentsData.current"
          @on-change="commentChange"
        />
      </div>
    </div>
  </div>
</template>
<script setup>
const axios = inject("axios");
import { MdPreview } from "md-editor-v3";
import "md-editor-v3/lib/style.css";
import { ScrollIntoView, Notice } from "view-ui-plus";
import Comment from "./Comment.vue";
import { eventBus } from "../../js/eventBus.js";
import variables from "../../js/variable";
import "../../js/click-colorful";

const momentsData = ref(null); //说说数据

function replyOver(commentId) {
  document.getElementById("replyIco" + commentId).style.display = "block";
}
function replyOut(commentId) {
  document.getElementById("replyIco" + commentId).style.display = "none";
}

//查询所有说说
const findMoments = (pageNum) => {
  if (
    variables.userInfo.value &&
    variables.userInfo.value.roleName == "管理员"
  ) {
    axios
      .post("moments/findMoments", { pageNum: pageNum })
      .then((response) => {
        let res = response.data;
        if (res.msg == "成功") {
          momentsData.value = res.data;
        }
      })
      .catch();
  } else {
    axios
      .post("moments/findMoments", { pageNum: pageNum })
      .then((response) => {
        let res = response.data;
        if (res.msg == "成功") {
          momentsData.value = res.data;
        }
      })
      .catch();
  }
};
eventBus.on("findMoments", findMoments);

//说说翻页
function commentChange(pageNum) {
  findMoments(pageNum);

  // 滚动至评论区域顶部
  ScrollIntoView(document.getElementById("ssUl"), {
    time: 1000,
    align: {
      top: 0,
      topOffset: 30,
    },
  });
}

//点赞
function dz(event, id) {
  //点击特效
  new colorBall().fly(event.clientX, event.clientY);

  axios
    .post("moments/likeMoments", { id: id })
    .then((response) => {
      let res = response.data;
      findMoments(1);
    })
    .catch();
}

//回复按钮
function hfpl(fid, zid) {
  //显示评论框
  document.getElementById("reply" + zid).style.display = "block";
  //重置发送评论数据
  emptyPlData();
  //设置回复id
  variables.plData.commentId = fid;
  if (zid != 1) {
    variables.plData.bhfId = zid;
  }
  //说说id
  variables.plData.targetId = zid;
}

//取消回复
function qxhf() {
  // 获取所有具有 class 为 replyDiv 的元素
  const replyDivElements = document.querySelectorAll(".replyDiv");
  // 遍历这些元素并将它们隐藏
  replyDivElements.forEach((element) => {
    element.style.display = "none";
  });
}
eventBus.on("qxhf", qxhf);

//重置发送评论数据
function emptyPlData() {
  variables.plData.content = "";
  variables.plData.commentId = null;
  variables.plData.bhfId = null;
}

onMounted(() => {
  findMoments(1);
});
</script>
<style  scoped>
.bozhu {
  background-color: #00b7ff;
  width: 15px;
  height: 15px;
  line-height: 15px;
  text-align: center;
  color: #fff;
  border-radius: 50%;
  position: absolute;
  bottom: 0;
  right: 0;
}

.main {
  background-color: #f7f9fe;
  margin-top: 70px;
}

.zx {
  width: 70%;
  margin: 0 auto;
  padding-top: 30px;
}

.bzDiv {
  position: relative;
  margin-bottom: 20px;
  border-radius: 10px;
  overflow: hidden;
}

.ssn {
  position: absolute;
  top: 0;
  padding: 40px;
  color: #fff;
  letter-spacing: 2px;
}

li {
  background-color: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  padding: 10px;
  margin-top: 30px;
  list-style-type: none;
}

.user {
  display: flex;
  align-items: center;
}

.user > div {
  margin-left: 10px;
}

@font-face {
  font-family: "sxt";
  src: url(https://oss.adu88.top/blog/font/sxt.ttf);
}

.moment_content {
  border-top: 1px solid rgb(236, 236, 236);
  border-bottom: 1px solid rgb(236, 236, 236);
  min-height: 50px;
  padding: 0 10px 10px 10px;
  font-family: "sxt", Arial, sans-serif;
}

.hfplDiv {
  padding-bottom: 10px;
  display: flex;
  justify-content: space-between;
}

.hhfplDiv {
  padding: 0 0 10px 25px;
  display: flex;
  justify-content: space-between;
}

p {
  display: flex;
  align-items: center;
}

/* -------------------------点赞按钮-------------------------------------------- */

/* -------------------------点赞按钮end-------------------------------------------- */

@media (max-width: 1000px) {
  .zx {
    width: 90%;
  }
  /* .moment_content {
    font-family: Arial, sans-serif;
  } */
}
</style>